<template>
  <a-modal title="体检配置" :width="660" :visible="visible" :confirmLoading="loading" @ok="handleSubmit"
    @cancel="handleClose">
    <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="可体检">
        <a-checkbox-group @change="weekChange" v-model="form.weeks">
          <a-checkbox :value="1">周一</a-checkbox>
          <a-checkbox :value="2">周二</a-checkbox>
          <a-checkbox :value="3">周三</a-checkbox>
          <a-checkbox :value="4">周四</a-checkbox>
          <a-checkbox :value="5">周五</a-checkbox>
          <a-checkbox :value="6">周六</a-checkbox>
          <a-checkbox :value="7">周日</a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item label="可体检日期">
        <!-- <a-date-picker format="YYYY-MM-DD" :disabled-date="disabledDate"/> -->
        <div class="flex-date">
          <div class="date-item" v-for="(item, index) in form.checkRqYes" :key="item">
            {{ item }}
            <a-icon @click="yesDateDelete(index)" class="icon" type="close" />
          </div>
          <a-date-picker style="margin-bottom: 8px;" format="MM-DD" valueFormat="MM-DD" v-model="selectDate"
            @change="yesDateChange" />

        </div>
      </a-form-model-item>
      <a-form-model-item label="不可体检日期">
        <div class="flex-date">
          <div class="date-item" v-for="(item, index) in form.checkRqNo" :key="item">
            {{ item }}
            <a-icon @click="noDateDelete(index)" class="icon" type="close" />
          </div>
          <a-date-picker style="margin-bottom: 8px;" format="MM-DD" valueFormat="MM-DD" v-model="selectDate"
            @change="noDateChange" />
        </div>
      </a-form-model-item>
      <a-form-model-item label="用户可预约天数">
        <a-input v-model="form.userCanSee" size="large" />
      </a-form-model-item>
      <a-form-model-item label="生成体检预约天数">
        <a-input v-model="form.createRqDays" size="large" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import api from '@/api/yuyue/config'

export default {
  data() {
    return {
      loading: false,
      visible: false,
      visible: false,
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      selectDate: null,
      form: {
        weeks: [],
        checkRqNo: [],
        checkRqYes: [],
        createRqDays: 15,
        userCanSee: 14
      },
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
    }
  },
  created() {
  },
  methods: {
    handleSubmit() {
      api.updateConfig(this.form).then(res => {
        this.loading = false
          this.$message.success('修改成功');
          this.visible = false
      })
    },
    getConfig() {
      api.getConfig().then(res => {
        console.log(JSON.parse(res.data));
        this.form = JSON.parse(res.data)
      })
    },
    weekChange(e) {
      console.log(e);

    },
    yesDateChange(e) {
      if (!this.form.checkRqYes.includes(e)) {
        this.form.checkRqYes.push(e)
      }
      this.selectDate = null
    },
    yesDateDelete(index) {
      this.form.checkRqYes.splice(index, 1)
    },
    noDateChange(e) {
      if (!this.form.checkRqNo.includes(e)) {
        this.form.checkRqNo.push(e)
      }
      this.selectDate = null
    },
    noDateDelete(index) {
      this.form.checkRqNo.splice(index, 1)
    },
    show() {
      this.visible = true
      this.getConfig()

    },
    handleClose() {
      this.visible = false
    }
  }
}
</script>
<style lang="less">
.flex-date {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  height: 40px;

  .date-item {
    padding: 0px 3px;
    border-radius: 5px;
    background: #e8e8e8;
    height: 25px;
    line-height: 25px;
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 8px;

    .icon {
      cursor: pointer;
    }
  }
}
</style>